<div class="deal-content" style="background-image:url('{$image}')">
    <div style="width: 1200px;">
        <div class="splitcontent">
            {$subName}
        </div>
        <!-- <div class="box">
            <input class="boxInput" placeholder="请输入想要搜索的内容"/>
            <div class="boxright">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36"
                     height="36" viewBox="0 0 36 36" fill="none">
                    <path d="M15.75 28.5C22.7916 28.5 28.5 22.7916 28.5 15.75C28.5 8.7084 22.7916 3 15.75 3C8.7084 3 3 8.7084 3 15.75C3 22.7916 8.7084 28.5 15.75 28.5Z"
                          stroke="rgba(255, 255, 255, 1)" stroke-width="1.5" stroke-linejoin="round"
                          style="mix-blend-mode:normal">
                    </path>
                    <path stroke="rgba(255, 255, 255, 1)" stroke-width="1.5" stroke-linejoin="round"
                          stroke-linecap="round" style="mix-blend-mode:normal" d="M24.918 24.917L31.2819 31.281">
                    </path>
                </svg>
                <div class="boxrightp">搜索</div>
            </div>
        </div> -->

    </div>
</div>

<div class="boxone">
    <div class="containers">
        <!-- 视频播放器 -->
        <div class="video-player-container">
            {if $info.ifarme}
            <iframe src="{$info.ifarme}" scrolling="no" border="0" frameborder="0" framespacing="0" allowfullscreen="true" loading="lazy"></iframe>
            {else}
            <video 
                id="videoPlayer" 
                class="video-element" 
                controls 
                preload="metadata"
                poster="{$info.image}" 
                playsinline 
                webkit-playsinline 
                x5-playsinline>
                <source src="{$info.video_file|default=''}" type="video/mp4">
                <source src="{$info.video_file|default=''}" type="video/webm">
                <p>您的浏览器不支持HTML5视频播放。</p>
            </video>
            {/if}
        </div>

        <!-- 视频信息 -->
        <div class="video-info">
            {$info.content}
        </div>

    </div>
</div>
<script>
    function ll(){
        location.href='{:url("index/lt_detail")}?id=';
    }

    // 视频播放器初始化
    document.addEventListener('DOMContentLoaded', function() {
        const video = document.getElementById('videoPlayer');
        
        if (video) {
            // 视频加载完成事件
            video.addEventListener('loadedmetadata', function() {
                console.log('视频元数据加载完成');
                // 根据视频实际尺寸调整显示
                adjustVideoDisplay(this);
            });

            // 视频播放事件
            video.addEventListener('play', function() {
                console.log('视频开始播放');
            });

            // 视频暂停事件
            video.addEventListener('pause', function() {
                console.log('视频暂停');
            });

            // 视频结束事件
            video.addEventListener('ended', function() {
                console.log('视频播放结束');
            });

            // 视频错误事件
            video.addEventListener('error', function(e) {
                console.error('视频加载错误:', e);
                // 可以在这里显示错误信息或默认封面
            });
            
            // 移动端优化：监听设备方向变化
            window.addEventListener('orientationchange', function() {
                setTimeout(function() {
                    // 重新计算视频容器尺寸
                    const container = document.querySelector('.video-player-container');
                    if (container) {
                        container.style.height = '500px';
                    }
                }, 100);
            });
        }
    });
    
    // 根据视频内容尺寸自适应显示
    function adjustVideoDisplay(videoElement) {
        if (videoElement.videoWidth && videoElement.videoHeight) {
            console.log('视频原始尺寸：' + videoElement.videoWidth + 'x' + videoElement.videoHeight);
            
            // 获取容器和视频元素
            const container = document.querySelector('.video-player-container');
            const video = document.querySelector('.video-element');
            
            if (container && video) {
                // 移除之前可能添加的类
                container.classList.remove('wide-video', 'tall-video');
                
                // 计算视频的宽高比
                const aspectRatio = videoElement.videoWidth / videoElement.videoHeight;
                console.log('视频宽高比：' + aspectRatio.toFixed(4));
                
                // 根据宽高比应用不同的处理方式
                if (aspectRatio > 2) { // 超宽屏视频
                    container.classList.add('wide-video');
                    console.log('检测到超宽屏视频');
                } else if (aspectRatio < 0.5) { // 超窄屏视频
                    container.classList.add('tall-video');
                    console.log('检测到超窄屏视频');
                }
                
                // 在控制台输出调整信息
                console.log('视频将在500px高度的容器中自适应显示');
            }
        }
    }
    
    // 页面加载完成后优化视频播放器
    window.addEventListener('load', function() {
        // 检查是否为移动设备
        const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
        
        if (isMobile) {
            // 移动端优化：隐藏全屏按钮
            const video = document.getElementById('videoPlayer');
            if (video) {
                video.setAttribute('webkit-playsinline', 'true');
                video.setAttribute('playsinline', 'true');
                video.setAttribute('x5-playsinline', 'true');
            }
        }
    });
</script>

<style>
    .boxone {
        width: 100%;
        padding: 40px 0;
        background: rgba(235, 238, 241, 1);
    }
    
    /* 响应式容器优化 */
    @media (max-width: 1200px) {
        .boxone {
            padding: 30px 0;
        }
    }
    
    @media (max-width: 768px) {
        .boxone {
            padding: 20px 0;
        }
    }
    
    @media (max-width: 480px) {
        .boxone {
            padding: 15px 0;
        }
    }
    .box {
        width: 1200px;
        height: 120px;
        opacity: 1;
        border-radius: 140px;
        background: rgba(255, 255, 255, 1);
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
    }

    input:focus {
        /*outline: none;*/
    }

    /* 标准写法 */
    input::placeholder {
        color: rgba(187, 196, 200, 1);
        font-size: 26px;
    }

    .boxInput {
        width: 1000px;
        height: 100px;
        line-height: 120px;
        padding-left: 60px;
        font-size: 26px;
        font-weight: 400;
        border-radius: 140px;
        border: 0;
        letter-spacing: 0px;
        color: rgba(187, 196, 200, 1);
        vertical-align: middle
    }

    .boxright {
        width: 280px;
        height: 100px;
        opacity: 1;
        border-radius: 140px;
        background: rgba(2, 4, 5, 1);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .boxrightp {
        /** 文本1 */
        font-size: 26px;
        font-weight: 600;
        letter-spacing: 0px;
        line-height: 36.4px;
        color: rgba(255, 255, 255, 1);
        text-align: center;
        vertical-align: middle;
        margin-left: 20px;
    }
</style>

<style>


    /* 自定义图标样式 */
    .icon {
        display: inline-block;
        width: 20px;
        height: 20px;
        position: relative;
    }

    .icon-play {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 10px 0 10px 16px;
        border-color: transparent transparent transparent #ff0000;
        margin-left: 4px;
    }

    .icon-eye::before {
        content: "👁";
        font-size: 16px;
    }

    .icon-thumbs-up::before {
        content: "👍";
        font-size: 16px;
    }

    .icon-thumbs-down::before {
        content: "👎";
        font-size: 16px;
    }

    .icon-share::before {
        content: "🔗";
        font-size: 16px;
    }

    .icon-bookmark::before {
        content: "🔖";
        font-size: 16px;
    }

    /* 容器样式 */
    .containers {
        max-width: 1200px;
        width: 100%;
        margin: 0 auto;
        padding: 30px;
        border-radius: 10px;
        background: #fff;
        box-sizing: border-box;
    }

    /* 视频播放区域 */
    .video-player-container {
        width: 100%;
        background-color: #000;
        border-radius: 8px;
        height: 500px; /* 固定高度为500px */
        overflow: hidden;
        margin-bottom: 25px;
        position: relative;
    }

    .video-player-container iframe,
    .video-player-container video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 8px;
        outline: none;
        object-fit: contain; /* 保持视频比例，完整显示视频 */
        object-position: center; /* 居中显示 */
        max-width: 100%;
        max-height: 100%;
    }
    
    /* 视频容器内的内容居中显示 */
    .video-player-container::before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        margin-right: -0.25em;
    }
    
    /* 针对横向长视频的优化 */
    .video-player-container.wide-video .video-element {
        width: 100%;
        height: auto;
        max-height: 100%;
    }
    
    /* 针对竖向长视频的优化 */
    .video-player-container.tall-video .video-element {
        width: auto;
        height: 100%;
        max-width: 100%;
    }
    
    .video-player-container video::-webkit-media-controls-fullscreen-button {
        display: none;
    }

    .video-element {
        width: 100%;
        height: 100%;
        border-radius: 8px;
        background-color: #000;
        outline: none;
        object-fit: contain; /* 保持视频比例，完整显示视频 */
        object-position: center; /* 居中显示 */
        max-width: 100%;
        max-height: 100%;
    }
    
    /* 移动端视频控制栏优化 */
    .video-element::-webkit-media-controls-panel {
        background-color: rgba(0, 0, 0, 0.7);
    }
    
    .video-element::-webkit-media-controls-current-time-display,
    .video-element::-webkit-media-controls-time-remaining-display {
        color: white;
    }

    .video-placeholder {
        width: 100%;
        padding-top: 56.25%; /* 16:9 比例 */
        position: relative;
    }

    .video-placeholder img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .play-button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100px;
        height: 100px;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .play-button:hover {
        background-color: white;
        transform: translate(-50%, -50%) scale(1.1);
    }

    /* 视频信息区域 */
    .video-info {
        margin-bottom: 30px;
    }

    .video-main-info {
        flex: 1;
        min-width: 300px;
    }

    .video-title {
        font-size: 24px;
        margin-bottom: 15px;
        color: #222;
    }

    .video-meta {
        display: flex;
        align-items: center;
        color: #666;
        font-size: 14px;
        margin-bottom: 20px;
    }

    .video-views {
        margin-right: 20px;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .video-actions {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-bottom: 25px;
    }

    .action-btn {
        display: flex;
        align-items: center;
        gap: 5px;
        color: #666;
        background: none;
        border: none;
        cursor: pointer;
        font-size: 14px;
        padding: 5px 10px;
        border-radius: 4px;
        transition: background-color 0.2s;
    }

    .action-btn:hover {
        background-color: #eee;
    }

    .like-btn .icon-thumbs-up::before {
        color: #ff0000;
    }

    .share-btn .icon-share::before {
        color: #0084ff;
    }

    .video-description {
        background-color: #f9f9f9;
        padding: 15px;
        border-radius: 6px;
        line-height: 1.8;
        margin-bottom: 20px;
    }

    /* 上传者信息 */
    .uploader-info {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }

    .uploader-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 15px;
    }

    .uploader-name {
        font-weight: bold;
        margin-bottom: 3px;
    }

    .subscriber-count {
        font-size: 13px;
        color: #666;
    }

    .subscribe-btn {
        margin-left: auto;
        background-color: #ff0000;
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 4px;
        font-weight: bold;
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .subscribe-btn:hover {
        background-color: #cc0000;
    }

    /* 相关视频 */
    .related-videos {
        margin-top: 40px;
    }

    .section-title {
        font-size: 20px;
        margin-bottom: 20px;
        color: #222;
    }

    .video-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
    }

    .related-video-item {
        cursor: pointer;
    }

    .video-thumbnail {
        width: 100%;
        border-radius: 6px;
        margin-bottom: 10px;
        position: relative;
    }

    .video-thumbnail img {
        width: 100%;
        border-radius: 6px;
    }

    .video-duration {
        position: absolute;
        bottom: 5px;
        right: 5px;
        background-color: rgba(0, 0, 0, 0.8);
        color: white;
        font-size: 12px;
        padding: 2px 5px;
        border-radius: 3px;
    }

    .video-item-title {
        font-weight: 600;
        margin-bottom: 5px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .video-item-channel, .video-item-meta {
        font-size: 13px;
        color: #666;
    }

    /* 响应式调整 */
    @media (max-width: 1200px) {
        .containers {
            max-width: 95%;
            padding: 20px;
        }
    }
    
    @media (max-width: 768px) {
        .containers {
            padding: 15px;
        }
        
        .video-player-container {
            border-radius: 4px;
            height: 400px; /* 在平板设备上稍微降低高度 */
        }
        
        .video-player-container iframe,
        .video-player-container video {
            border-radius: 4px;
        }
        
        .video-actions {
            flex-wrap: wrap;
        }

        .video-grid {
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        }
        
        .video-title {
            font-size: 22px;
        }
    }

    @media (max-width: 480px) {
        .containers {
            padding: 10px;
        }
        
        .video-player-container {
            height: 300px; /* 在手机设备上进一步降低高度 */
        }
        
        .video-title {
            font-size: 20px;
        }

        .video-meta {
            flex-direction: column;
            align-items: flex-start;
            gap: 5px;
        }

        .video-grid {
            grid-template-columns: 1fr;
        }
        
        .video-actions {
            gap: 10px;
        }
        
        .action-btn {
            padding: 5px 8px;
            font-size: 13px;
        }
    }
    
    /* 超小屏幕设备 */
    @media (max-width: 320px) {
        .video-title {
            font-size: 18px;
        }
        
        .video-actions {
            flex-direction: column;
            align-items: flex-start;
        }
        
        .video-player-container {
            height: 250px; /* 在超小屏幕上进一步降低高度 */
        }
    }
    
    /* 高分辨率屏幕优化 */
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
        .video-player-container {
            border-radius: 6px;
        }
        
        .video-player-container iframe,
        .video-player-container video {
            border-radius: 6px;
        }
    }
    
    /* 确保在所有设备上视频都能正确自适应 */
    @media (max-width: 768px) {
        .video-player-container iframe,
        .video-player-container video {
            object-fit: contain;
            object-position: center;
        }
        
        .video-element {
            object-fit: contain;
            object-position: center;
        }
    }
    
    @media (max-width: 480px) {
        .video-player-container iframe,
        .video-player-container video {
            object-fit: contain;
            object-position: center;
        }
        
        .video-element {
            object-fit: contain;
            object-position: center;
        }
    }
</style>

